<template>
  <div class="echarts-box">
    <div id="myEcharts" :style="{ width: '900px', height: '300px' }"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { ref,onMounted} from 'vue';
export default {
  props:{
    codeCapacities: {
      type: Array,
      required: true
    }
  },
  setup(props) {
    const codeCapacities=ref(props.codeCapacities)
    let echart = echarts;
    onMounted(() => {
      initChart();
    });

    function initChart() {
      // 计算各指标的平均值
      console.log(codeCapacities,'codecapa66666');
      const avgValues = [];
      const indicators = ['score', 'codeEfficiency', 'thinking', 'codeSpeed', 'codeSpecification'];
      for (let i = 0; i < indicators.length; i++) {
        let sum = 0;
        for (let j = 0; j < codeCapacities.value.length; j++) {
          sum += codeCapacities.value[j][indicators[i]];
        }
        avgValues.push((sum / codeCapacities.value.length).toFixed(1)); // 取平均值，并保留一位小数
      }

      //雷达图
      let chart = echart.init(document.getElementById("myEcharts"));
      chart.setOption({
        radar: [
          {
            indicator: [
              { name: '正确性', max: 0 },
              { name: '代码效率', max: 0 },
              { name: '思路', max: 0 },
              { name: '代码速度', max: 0},
              { name: '代码规范', max: 0 }
            ],
            radius:120,
            splitNumber:5,
            axisName:{
              formatter:"{value}",
              color:"#428BD4"
            }
          }
        ],
        series: [
          {
            type: 'radar',
            data: [
              {
                value: avgValues,
                name: '平均值',
              }
            ]
          }
        ]
      });

    }
    window.onresize = function() {
      //自适应大小
      chart.resize();
    }
    return{initChart,codeCapacities}
  }
}
</script>

<style scoped>
</style>